<%--
Created by IntelliJ IDEA.
User: 0927
Date: 2020/9/24
Time: 19:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>管理员页面</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">

    <script src="/prj/plugins/jquery/jquery.min.js"></script>
    <script src="/prj/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>


</head>

<body>
    <div class="container" style=" background-color:#f5f5f5;width: 100%;">
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid" style="background-color: white;">
                <div class="navbar-header">
                    <a class="navbar-brand" href="../index/index.jsp">精翼二手车</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav  navbar-left">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 5px 0 0 0;">
<%--                                <img alt="" class="img-circle" src="../../images/zly.png" width="40px" height="40px" />--%>
                                <span style="color: #0e0101;font-size: 15px">
<%--								<i>精翼二手车</i>--%>
							</span>
                            </a>
                        </li>
                    </ul>
                    <!-- <form class="navbar-form navbar-left" role="search">
                        <button type="submit" class="btn btn-default">
						向左对齐-提交按钮
					</button>
                    </form> -->
                    <p class="navbar-text navbar-left">欢迎管理员: <span style="font-weight: bold;color: red">${name}</span></p>
                    <!--向右对齐-->
                    <ul class="nav navbar-nav navbar-right">
<%--                        <li><a href="../logAndRegist/login.jsp"><span class="glyphicon glyphicon-user"></span> 登录</a></li>--%>
                            <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 信箱</a></li>
<%--                            <li><a href="../mail/mailBox.jsp"><span class="glyphicon glyphicon-envelope"></span> 信箱</a></li>--%>
                        <!-- <span class="badge">3</span> -->
    <li><a href="${pageContext.request.contextPath}/logAndRegist/exit.action">安全退出</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
							管理员中心 <b class="caret"></b>
						</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">个人资料</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">设置</a></li>
                                <li class="divider"></li>
                                <li><a href="${pageContext.request.contextPath}/logAndRegist/exit.action">安全退出</a></li>
                                <li class="divider"></li>
                                <!-- <li><a href="#">另一个分离的链接</a></li> -->
                            </ul>
                        </li>

                    </ul>

                </div>
            </div>
        </nav>
        <!-- 以上为导航栏 -->


<div class="container-fluid">

    <div class="row">
        <div class="col-md-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" id="myNav">
                <li class="active"><a href="#section-1">客户管理</a></li>
                <li><a href="#section-2">销售管理</a></li>
                <li><a href="#section-3">上架新车</a></li>
                <li><a href="#section-6">车辆管理</a></li>
                <li><a href="#section-7">增加车主</a></li>
                <li><a href="#section-4">第四部分</a></li>
                <li><a href="#section-5">第五部分</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <h2 id="section-1">客户管理</h2>
            <caption>客户表</caption>
            <div id="one" class="row"></div>
            <script>
                $(function(){
                    $("#one").load("/prj/admin/one.action")
                })
            </script>




            <h2 id="section-2">销售管理</h2>
            <caption>销售人员表</caption>
            <div class="row" id="two">
            </div>
            <script>
                $(function(){
                    $("#two").load("/prj/admin/two.action")
                })
            </script>



            <hr>
            <h2 id="section-3">上架新车</h2>
            <div class="row" id="addCar">
            </div>
            <script>
                $(function(){
                    $("#addCar").load("/prj/jsp/adCenter/AddCar.jsp")
                })
            </script>


            <hr>
            <h2 id="section-6">车辆管理</h2>
            <div class="row" id="showDescCar">
            </div>
            <script>
                $(function(){
                    $("#showDescCar").load("/prj/admin/showDescCar.action")
                })
            </script>

            <hr>
            <h2 id="section-7">增加车主</h2>
            <div class="row" id="addOwner">
            </div>
            <script>
                $(function(){
                    $("#addOwner").load("/prj/jsp/adCenter/AddOwner.jsp")
                })
            </script>



            <hr>
            <h2 id="section-4">第四部分</h2>
            <div id="main2" style="width: 600px;height:400px;"></div>
            <hr>
            <h2 id="section-5">第五部分</h2>
            <div id="main" style="width: 600px;height:400px;"></div>
        </div>

    </div>

</div>



        </div>
<div id="footer">

</div>
<!-- 
    <script src="plugins\jquery\jquery.min.js"></script>
    <script src="plugins\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
    <style>
        /* Custom Styles */
        
        ul.nav-tabs {
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        
        ul.nav-tabs li {
            margin: 0;
            border-top: 1px solid #ddd;
        }
        
        ul.nav-tabs li:first-child {
            border-top: none;
        }
        
        ul.nav-tabs li a {
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        
        ul.nav-tabs li.active a,
        ul.nav-tabs li.active a:hover {
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        
        ul.nav-tabs li:first-child a {
            border-radius: 4px 4px 0 0;
        }
        
        ul.nav-tabs li:last-child a {
            border-radius: 0 0 4px 4px;
        }
        
        ul.nav-tabs.affix {
            top: 30px;
            /* Set the top position of pinned element */
        }
    </style>
    <script type="text/javascript">


        $(document).ready(function() {
            $("#myNav").affix({
                offset: {
                    top: 515
                }
            });
        });


        /* echarts图 */
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '车辆成交数据'
            },
            tooltip: {},
            legend: {
                data: ['成交额']
            },
            xAxis: {
                data: ["奔驰", "别克", "大众", "日产", "宝马", "丰田"]
            },
            yAxis: {},
            series: [{
                name: '成交额',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option = {
            series: [{
                name: '用户年龄群体',
                type: 'pie',
                radius: '55%',
                data: [{
                    value: 235,
                    name: '其他'
                }, {
                    value: 274,
                    name: '40-50'
                }, {
                    value: 310,
                    name: '20-25'
                }, {
                    value: 335,
                    name: '35-40'
                }, {
                    value: 400,
                    name: '25-35'
                }],
                roseType: 'angle',
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 全选
        $(function () {
            //1.获取select对象
            let ck = document.getElementById("ck_all");
            //3.获取下面所有的ck
            let cks = document.getElementsByName("ck_content");


        // );
        $(function(){
            $("#footer").load("${pageContext.request.contextPath}/jsp/common/footer.jsp");
        })
        })

    </script>
</body>

</html>